<template>
  <div class="tw-libimageinfo" >
  <ul class="tw-libimginfolist" :class="{xcolumn: isColumn, xwrap: resultColumns > 0, [`x${_uid}`]:true}" v-if="data.length>0">
    <li class="tw-imginfo-item"
      :class="{xhashref: item.href}"
      v-for="(item, idx) in data"
      :key="idx"
      :style="{marginTop: resultColumns > 0 && idx + 1 > resultColumns ? itemHSpacing : '0'}"
      @click="clickItem(item)">
      <div class="tw-imginfo-item-iconbox" v-if="showImg">
        <i class="tw-custico x30 xrzip"></i>
        <i v-if="item.iconCss && item.iconCss !==''" class="tw-ico" :class="item.iconCss"></i>
        <img v-else-if="item.imgUrl && item.imgUrl !==''" class="xicon" :src="item.imgUrl" />
        <img v-else-if="icons[0] && icons[0] !== ''" class="xicon" :src="`${$twApp.fileBaseUrl}${icons[0].localPath}`" />

        <template v-else-if="item.format && iconformat.length>0">
          <img v-if="iconformat[1] && iconformat[1] !== ''&& ['jpg', 'jpeg', 'gif', 'png', 'bmp'].includes(item.format)" class="xicon" :src="`${$twApp.fileBaseUrl}${iconformat[1].localPath}`" />
          <img v-else-if="iconformat[2] && iconformat[2] !== '' && ['doc', 'docx', 'wps'].includes(item.format)" class="xicon" :src="`${$twApp.fileBaseUrl}${iconformat[2].localPath}`" />
          <img v-else-if="iconformat[3] && iconformat[3] !== '' && ['xls', 'xlsx'].includes(item.format)" class="xicon" :src="`${$twApp.fileBaseUrl}${iconformat[3].localPath}`" />
          <img v-else-if="iconformat[4] && iconformat[4] !== '' && ['ppt', 'pptx'].includes(item.format)" class="xicon" :src="`${$twApp.fileBaseUrl}${iconformat[4].localPath}`" />
          <img v-else-if="iconformat[5] && iconformat[5] !== '' && ['pdf'].includes(item.format)" class="xicon" :src="`${$twApp.fileBaseUrl}${iconformat[5].localPath}`" />
          <img v-else-if="iconformat[6] && iconformat[6] !== '' && ['txt'].includes(item.format)" class="xicon" :src="`${$twApp.fileBaseUrl}${iconformat[6].localPath}`" />
          <img v-else-if="iconformat[7] && iconformat[7] !== '' && ['zip', 'rar', '7z'].includes(item.format)" class="xicon" :src="`${$twApp.fileBaseUrl}${iconformat[7].localPath}`" />
          <img v-else-if="iconformat[8] && iconformat[8] !== '' && ['mp4', 'avi', 'mpg', 'm3u8', 'mpeg', 'flv'].includes(item.format)" class="xicon" :src="`${$twApp.fileBaseUrl}${iconformat[8].localPath}`" />
          <img v-else class="xicon" :src="`${$twApp.fileBaseUrl}${iconformat[0].localPath}`" />
        </template>
        <img v-else class="xicon" src="@assets/one.png" />
      </div>

      <div class="tw-imginfo-item-body">
        <div v-if="item.mulcontent && item.mulcontent.length>0"  style="display: flex;justify-content: space-between;">
          <div v-for="(itm, itx) in item.mulcontent" :key="itx" :style="{textAlign: itm.align ? itm.align : 'center',width: itm.width ? itm.width : ''}">
            <div  v-if="itm.title" class="tw-imginfo-item-title" v-html="itm.title"></div>
            <div class="tw-imginfo-item-des">
              <div v-if="itm.content" v-html="itm.content"></div>
              <div v-if="itm.html" v-html="itm.html"></div>
            </div>
          </div>
        </div>
        <div v-else>
          <div v-if="item.title" class="tw-imginfo-item-title" v-html="item.title"></div>
          <div class="tw-imginfo-item-des">
            <div v-if="item.content" v-html="item.content"></div>
            <div v-if="item.html" v-html="item.html"></div>
          </div>
        </div>

        <div v-if="item.bottomtip"
         style="position: absolute;bottom: 0"
         v-html="item.bottomtip">
        </div>
        <div v-else-if="item.buttonvalue"
         @click="handleClick(item)"
         style="position: absolute;bottom: 0;border:1px solid #218fff;color:#218fff;padding:2px 5px;border-radius:5px;cursor:pointer">
         {{item.buttonvalue.label}}
        </div>
      </div>
      <div style="position: absolute;right:10px;" :style="{top:itemPadding}" v-if="item.starvalue">
        <el-rate
          v-model="item.starvalue"
          :disabled-void-color="disabledvoidcolor"
          :disabled="readOnly"
          :show-text="showtext"
          :show-score="showscore"
          :void-color="voidcolor"
          :allow-half="allowhalf"
          :low-threshold="2"
          :max="5"
          :high-threshold="4"
          :text-color="textcolor"
          :score-template="scoreTpl"
          :colors="colors">
        </el-rate>
      </div>
      <div v-else-if="item.rightip"
       style="position: absolute;right:10px;"
       :style="{top:itemPadding}"
       v-html="item.rightip">
      </div>
    </li>
  </ul>
  <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import border from '../tw-lib-base/border/mixins'
import nodata from '../tw-lib-base/no-data/no-data'

export default {
  name: 'icon-sort-list',

  mixins: [props, style, border, nodata],

  props,

  computed: {
    resultColumns () {
      const columns = parseInt(this.columns)

      return columns && columns > 0 ? columns : 0
    },

    style () {
      return Object.assign({
        columns: this.columns,
        itemSpacing: this.itemSpacing,
        itemBg: this.itemBg,
        itemPadding: this.itemPadding,
        iconWidth: this.iconWidth,
        iconHeight: this.iconHeight,
        fontFamily: this.fontFamily,
        titleFontSize: this.titleFontSize,
        titleFontColor: this.titleFontColor,
        desFontSize: this.desFontSize,
        desFontColor: this.desFontColor,
        familyText: this.familyText,
        iconBool: this.iconBool,
        showLine: this.showLine,
        showMulText: this.showMulText,
        mulTextLine: this.mulTextLine,
        letterSpacing: this.letterSpacing,
        letterFontSize: this.letterFontSize,
        iconBorderColor: this.iconBorderColor,
        iconBorderRadius: this.iconBorderRadius,
        itemHeight: this.itemHeight
      }, this.borderStyle)
    }
  },

  methods: {
    handleClick (item) {
      console.log('aaa', item)
    },

    clickItem (item) {
      if (typeof this.clickFn === 'function') {
        this.clickFn(item)
      } else {
        if (item.href) {
          let relayHref = item.href
          if (relayHref.indexOf('?') === -1) {
            relayHref = relayHref + '?'
          }
          if (item.target === '_blank') {
            window.open(relayHref + `${this.$twApp.user.accreditUrl}`, '_blank')
          } else {
            window.location.href = relayHref + `${this.$twApp.user.accreditUrl}`
          }
          // if (item.target === '_blank') {
          //   window.open(item.href + `?${this.$twApp.user.accreditUrl}`, '_blank')
          // } else {
          //   window.location.href = item.href + `?${this.$twApp.user.accreditUrl}`
          // }
        }
      }
    },

    setStyle () {
      let style = `
        ::root > .tw-imginfo-item {
          padding: ${this.itemPadding};
          background: ${this.itemBg};
          font-family: ${this.familyText};
          border-radius: ${this.itemBorderRadius};
          height: ${this.itemHeight};
          align-items: ${this.itemAlign};
          cursor: pointer;
        }

        ::root > .tw-imginfo-item > .tw-imginfo-item-iconbox  {
          width: ${this.iconWidth};
          height: ${this.iconHeight};
        }

        ::root > .tw-imginfo-item .tw-imginfo-item-iconbox .xicon {
          width: 100%;
          height: 100%;
        }

        ::root > .tw-imginfo-item .tw-imginfo-item-title {
          font-size: ${this.titleFontSize};
          color: ${this.titleFontColor};
        }

        ::root > .tw-imginfo-item .tw-imginfo-item-des {
          font-size: ${this.desFontSize};
          color: ${this.desFontColor};
          font-family: ${this.familyText};
        }

        ::root > .tw-imginfo-item .el-rate__icon {
          margin-right: ${this.letterSpacing};
          font-size: ${this.letterFontSize};
        }
      `

      if (this.isColumn) {
        style += `
          ::root > .tw-imginfo-item + .tw-imginfo-item {
            margin-top: ${this.itemSpacing}!important;
          }
        `
      } else {
        style += `
          ::root > .tw-imginfo-item + .tw-imginfo-item {
            margin-left: ${this.itemSpacing};
          }
        `
      }

      if (this.resultColumns > 0) {
        style += `
          ::root > .tw-imginfo-item {
            width: calc((100% - ${(this.columns - 1) * parseInt(this.itemSpacing || 0)}px)/${this.columns});
          }

          ::root > .tw-imginfo-item:nth-child(${this.resultColumns}n+1) {
            margin-left: 0;
          }
        `
        // margin-bottom: ${this.itemSpacing};
      }

      if (this.fontFamily) {
        style += `
          .tw-imginfo-item {
            font-family: ${this.fontFamily};
          }
        `
      }

      if (this.hasBorder) {
        const border = `${this.borderSize} ${this.borderType} ${this.borderColor}`

        if (this.borderPosition.includes(0)) {
          style += `
              ::root > .tw-libimginfolist {
                border-top: ${border};
              }
            `
        }

        if (this.borderPosition.includes(1)) {
          style += `
              ::root > .tw-libimginfolist {
                border-bottom: ${border};
              }
            `
        }

        if (this.borderPosition.includes(2)) {
          style += `
            ::root > .tw-libimginfolist {
                border-left: ${border};
              }
            `
        }

        if (this.borderPosition.includes(3)) {
          style += `
            ::root > .tw-libimginfolist {
              border-right: ${border};
            }
          `
        }

        style += `
          ::root > .tw-libimginfolist {
            border-radius: ${this.borderRadius};
        }
        `
      }

      if (this.showLine) {
        style += `
          ::root > .tw-imginfo-item {
            border: 1px ${this.itemBorderType} ${this.itemBorderColor};
          }
        `
      }

      if (this.showMulText) {
        if (this.mulTextLine && parseInt(this.mulTextLine) >= 1) {
          style += `
            ::root > .tw-imginfo-item .tw-imginfo-item-des > div {
              overflow: hidden;
              white-space: normal;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: ${this.mulTextLine};
            }
          `
        } else {
          style += `
            ::root > .tw-imginfo-item .tw-imginfo-item-des > div{
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: normal;
            }
          `
        }
      } else {
        style += `
          ::root > .tw-imginfo-item .tw-imginfo-item-des > div{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        `
      }

      if (this.iconBool) {
        style += `
          ::root > .tw-imginfo-item > .tw-imginfo-item-iconbox  {
            border: 1px solid ${this.iconBorderColor};
            border-radius: ${this.iconBorderRadius};
            overflow: hidden;
          }
        `
      }

      if (this.iconsPosition === 'top') {
        style += `
          ::root > .tw-imginfo-item {
            display: block;
          }

          ::root > .tw-imginfo-item .tw-imginfo-item-iconbox {
            margin-bottom: 10px;
          }
        `
      }

      if (this.useHighItemBg) {
        style += `
          .tw-imginfo-item:hover {
            background-color: ${this.itemBgColor};
          }
          .tw-imginfo-item:hover,
          .tw-imginfo-item:hover .tw-imginfo-item-title,
          .tw-imginfo-item:hover .tw-imginfo-item-des,
          .tw-imginfo-item:hover div,
          .tw-imginfo-item:hover span,
          .tw-imginfo-item:hover a {
            color: ${this.itemColor};
          }
        `
      }

      if (this.cursorStyle) {
        style += `
          ::root > .tw-imginfo-item {
            cursor: auto;
          }
        `
      }

      this.addStyle(style)
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
